<template>
	<div class="hw-city-select" v-show="show">
		<div class="bg-musk" @click="hideComponent"></div>
		<div class="city-select-wrap">
			<h1>所在地区</h1>
			<div class="hw-city-tab">
				<span :class="{active: type == 1}" @click="changeType(1)">{{cityData[provinceInd].name}}</span>
				<span :class="{active: type == 2}" @click="changeType(2)">{{currentCity[cityInd].name}}</span>
				<span :class="{active: type == 3}" @click="changeType(3)">{{currentArea[areaInd]}}</span>
			</div>

			<div class="hw-city-info">
				<div class="city-info-item" :style="{transform: getStyle(1)}">
					<div 
						v-for="(data, pInd) in cityData" 
						:key="data.name + 'province'" 
						:class="[{active: pInd == provinceInd}, 'item']"
						@click="select('province', pInd)">
						{{data.name}}
						<svg class="select-icon" slot="icon" >
					        <use xlink:href="#selected"></use>
					    </svg>
					</div>
				</div>

				<div class="city-info-item" :style="{transform: getStyle(2)}">
					<div 
						v-for="(city, cInd) in currentCity" 
						:key="city.name + 'province'" 
						:class="[{active: cInd == cityInd}, 'item']"
						@click="select('city', cInd)">
						{{city.name}}
						<svg class="select-icon" slot="icon" >
					        <use xlink:href="#selected"></use>
					    </svg>
					</div>
				</div>

				<div class="city-info-item" :style="{transform: getStyle(3)}">
					<div 
						v-for="(area, aInd) in currentArea" 
						:key="area.name + 'province'" 
						:class="[{active: aInd == areaInd}, 'item']"
						@click="select('area', aInd)">
						{{area}}
						<!-- <svg class="select-icon" slot="icon" >
					        <use :xlink:href="require('src/assets/images/gou.svg')"></use>
					    </svg> -->
					    <img class="select-icon" :src="require('src/assets/images/gou.svg')">
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import selectSvg from 'src/assets/images/gou.svg';
	import data from 'src/config/data.json';
	export default {
		data() {
			return { 				
				cityData: data,
				type: 1, // 1 => 省， 2 => 市， 3 => 区
				provinceInd: 3,
				cityInd: 0,
				areaInd: 0,
				selectSvg: selectSvg
			}
		},

		props: {
			show: Boolean
		},

		methods: {
			getStyle(n) { 
				var t = this.type == 3 ? 2 : this.type; 
				return 'translateX('+ (n-t) +'00%)';
			},

			changeType(n) { 
				this.type = n;
			},

			select(type, n) {
				if (type == 'province') {
					this.provinceInd = n;
					this.cityInd = 0;
					this.areaInd = 0;
					this.type = 2;
				}

				if (type == 'city') {
					this.cityInd = n;
					this.type = 3;
				}

				if (type == 'area') {
					this.areaInd = n;
					this.type = 3;
					this.$emit('getAddress', {
						province: this.cityData[this.provinceInd].name,
						city: this.currentCity[this.cityInd].name,
						area: this.currentArea[this.areaInd]
					});
				}
			},

			hideComponent() {
				this.$emit('hideComponent');
			}
		},

		mounted() {
			console.log(selectSvg);
		},

		computed: {
			currentCity() {
				return this.cityData[this.provinceInd].city
			},

			currentArea() {
				return this.currentCity[this.cityInd].area || []
			} 
		}
	}
</script>

<style lang="scss">
	.hw-city-select {
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 999;
		left: 0;
		top: 0;

		.bg-musk {
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0,0,0,.5);
			width: 100%;
			height: 100%;
			z-index: 1000;
		}

		.city-select-wrap {
			position: relative;
			z-index: 1001;
			background: #fff;
			margin-top: 25vh;
			height: 75vh;
			font-size: 14px;

			h1 {
				position: absolute;
				z-index: 2;
				width: 100%;
				top: 0;
				left: 0;
				height: 45px;
				line-height: 45px;
				text-align: center;
				border-bottom: 1px solid #f1f1f1;
				font-size: 15px;
			}

			.hw-city-tab {
				position: absolute;
				z-index: 2;
				width: 100%;
				top: 45px;
				left: 0;
				padding-left: 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #f1f1f1;

				span {
					position: relative;
					display: inline-block;
					padding: 0 8px;
					margin-right: 15px;

					&.active {
						color: #f23030;

						&:after {
							content: '';
							position: absolute;
							width: 100%;
							height: 2px;
							background: #f23030;
							bottom: 0;
							left: 0;
						}
					}
				}

			}

			.hw-city-info { 
				position: relative;
				width: 100%;
				height: 100%; 
				border-top: 85px solid transparent;

				.city-info-item {
					position: absolute;
					width: 50%;
					height: 100%;
					overflow: scroll;
					transition: all .15s linear;

					.item {
						position: relative;
						margin: 0 18px; 
						line-height: 40px;
						border-bottom: 1px solid #f1f1f1;
						font-size: 14px;

						.select-icon {
							display: none;
							position: absolute;
							right: 0;
							top: 0;
							height: 40px;
							width: 26px;
						}

						&.active {
							.select-icon {
								display: block;
							}
						}
					}

					&:nth-child(2) {
						transform: translateX(100%);
						background: #f5f5f5;
					}

					&:nth-child(3) {
						transform: translateX(200%); 
					}

				}
				
			}
		}
	}
</style>